<template>
    <div :class="['cvu-collapse-panel', itemClasses]">
        <div :class="headerClasses" @click="toggle">
            <Icon 
                :class="['cvu-collapse-panel-arrow', `cvu-collapse-panel-arrow-${arrowPlacement}`]" 
                type="ios-arrow-forward" 
                v-if="!hideArrow"
            ></Icon>
            <slot></slot>
        </div>
        <collapse-transition v-if="mounted">
            <div :class="contentClasses" v-show="isActive">
                <div :class="boxClasses"><slot name="content"></slot></div>
            </div>
        </collapse-transition>
    </div>
</template>
<script>
import common from '../../../until/common'
const prefixCls = 'ivu-collapse';
import CollapseTransition from './collapse-transition'
export default {
    name: 'cvu-collapse-panel',
    components: { CollapseTransition },
    props: {
        // 当前面板的 name，与 Collapse的value对应，不填为索引值
        name: {
            type: String
        },
        // 隐藏箭头
        hideArrow: {
            type: Boolean,
            default: false
        },
        // 箭头位置， hideArrow属性为false生效
        arrowPlacement: {
            validator (value) {
                return common.oneOf(value, [
                    'left', 
                    'right'
                ]);
            },
            default: 'left'
        }
    },
    data () {
        return {
            index: 0, // use index for default when name is null
            isActive: false,
            mounted: false
        };
    },
    computed: {
        itemClasses () {
            return [
                `${prefixCls}-item`,
                {
                    [`${prefixCls}-item-active`]: this.isActive
                }
            ];
        },
        headerClasses () {
            return `${prefixCls}-header`;
        },
        contentClasses () {
            return `${prefixCls}-content`;
        },
        boxClasses () {
            return `${prefixCls}-content-box`;
        }
    },
    methods: {
        toggle () {
            this.$parent.toggle({
                name: this.name || this.index,
                isActive: this.isActive
            });
        }
    },
    mounted () {
        this.mounted = true;
        this.$parent.setActive();
    }
};
</script>
<style lang="scss" scoped>
.cvu-collapse-panel{
    border-top: 1px solid #dcdee2;
    .ivu-collapse-header{
        .cvu-collapse-panel-arrow{
            &.cvu-collapse-panel-arrow-right{
                position: relative;
                left: 96%;
            }
        }    
    }
}
</style>
